<template>
  <div class="accessories">
    <span class="hearder">园区数据</span>
    <div class="grid-content bg-purple four-flex">
      <div>
        <span>年度累计收费（元）</span>
        <h3>{{ dataTotal.annualIncome }}</h3>
      </div>
      <div>
        <span>入驻企业总数（个）</span>
        <h3>{{ dataTotal.enterpriseTotal }}</h3>
      </div>
      <div>
        <span>月卡车辆总数（辆）</span>
        <h3>{{ dataTotal.monthlyCardTotal }}</h3>
      </div>
      <div>
        <span>一体杆总数（台）</span>
        <h3>{{ dataTotal.chargePoleTotal }}</h3>
      </div>
    </div>
  </div>
</template>

<script>
import { getWorkbenListAPI } from '@/apis/workben'
export default {
  data() {
    return {
      dataTotal: {
        annualIncome: 0,
        enterpriseTotal: 0,
        monthlyCardTotal: 0,
        chargePoleTotal: 0
      }
    }
  },
  created() {
    this.getWorkbenList()
  },
  methods: {
    async getWorkbenList() {
      const res = await getWorkbenListAPI()
      // console.log(res)
      // this.$store.commit('setEchartsData', res.data.annualIncomeArray)
      // console.log(this.$store.state.echart.echartsData)
      this.dataTotal = res.data
    }
  }
}
</script>

<style>
.accessories{
  background-color: white;
  padding: 10px 20px;
  border-radius: 10px;
  height: 155px;
}
.hearder{
  margin-bottom: 15px;
  padding: 15px;
  border-radius: 10px;
}
 .four-flex {
   margin-top: 20px;
   display: flex;
   justify-content: space-between;
 }
 .four-flex span{
   font-size: 14px;
   color: #cccccc;
 }
</style>
